import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { Form, Input, message } from 'antd';
import { useEffect, useState } from 'react';
import Api from './service';

//仓库名称规则
const rules = [
	{ required: true, message: '请输入标签内容' },
	{ max: 10, message: '最多支持输入10个字符' },
]

//搜索菜单
const EditStorageModal = ({ item = {}, handleOk, handleCancel }) => {

	//弹框显隐
	const [visible, setVisible] = useState(false);
	const [loading, setLoading] = useState(false);
	const [form] = Form.useForm();

	//初始化打开弹框
	useEffect(() => {
		setVisible(true);
	}, [])

	//弹框完全关闭
	const afterClose = () => {
		handleCancel();
	}

	//点击确定
	const onOk = () => {
		form.validateFields().then(async val => {
			const updateApi = item.id ? Api.updateUserTag : Api.addUserTag;
			setLoading(true);
			const params = item.id ?
				{
					...item,
					name: val.tagName
				} :
				{
					name: val.tagName
				}
			const { success } = await updateApi(params);
			setLoading(false);
			if (success) {
				message.success('操作成功！');
				handleOk();
			}
		}).catch(err => {
			console.log(err, 'errr')
		})
	}

	//点击取消
	const onCancel = () => {
		setVisible(false);
	}

	const title = item.id ? '编辑标签' : '新建标签';

	return (
		<CommonModal
			title={title}
			width="496px"
			open={visible}
			onOk={onOk}
			onCancel={onCancel}
			afterClose={afterClose}
		>
			<Form name="edit-storage-modal" initialValues={{ tagName: item.name }} form={form} autoComplete="off">
				<Form.Item label="标签内容" name="tagName" rules={rules} >
					<Input placeholder='请输入标签内容' />
				</Form.Item>
			</Form>
			<CommonLoading loading={loading} />
		</CommonModal>
	)
}

export default EditStorageModal;